[file name]: MyFound.vue
[file content begin]
<template>
  <div class="found-container">
    <!-- 标题栏（替代搜索栏） -->
    <div class="search-bar">
      <h2>我的招领信息</h2>
      <el-button type="success" @click="addItem">新增招领</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table 
    :data="items" 
    border 
    stripe 
    style="width: 100%"
   @sort-change="handleSortChange"
 >
      <el-table-column 
        prop="id" 
        label="ID" 
        width="80"
        sortable
        :sort-orders="['ascending', 'descending']"
      />
      <el-table-column prop="itemName" label="物品名称" width="150" />
      <el-table-column prop="itemCategory" label="类别" width="100" />
      <el-table-column label="图片" width="120">
        <template #default="{ row }">
          <el-image
            v-if="row.image"
            style="width: 80px; height: 80px"
            :src="getImageUrl(row.image)"
            :preview-src-list="[getImageUrl(row.image)]"
            fit="cover"
          />
          <span v-else>无图片</span>
        </template>
      </el-table-column>
      <el-table-column prop="foundLocation" label="捡拾地点" width="150" />
+     <el-table-column prop="locate" label="领取地点" width="150" />
      <el-table-column prop="foundTime" label="捡拾时间" width="180">
        <template #default="{ row }">
          {{ formatDate(row.foundTime) }}
        </template>
      </el-table-column>
     <el-table-column prop="addTime" label="创建时间" width="180">
       <template #default="{ row }">
         {{ formatDate(row.addTime) }}
       </template>
       </el-table-column>
      <el-table-column prop="detailedDescription" label="详细描述" show-overflow-tooltip />
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="{ row }">
          <el-button size="small" @click="editItem(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteItem(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

interface FindItem {
  id: number;
  itemName: string;
  itemCategory: string;
  foundLocation: string;
  foundTime: string;
  detailedDescription: string;
  image: string | null;
  locate: string;
  addTime: string;
}

const items = ref<FindItem[]>([]);
const loading = ref(true);
const error = ref('');
const router = useRouter();

const addItem = () => {
  router.push({
    name: 'ItemEdit',
    query: { type: 'found' }
  });
};

// 处理排序变化
const handleSortChange = ({ prop, order }: { prop: string; order: string }) => {
  if (prop === 'id') {
    // 实现排序逻辑
    items.value.sort((a, b) => {
      return order === 'ascending' 
        ? a.id - b.id 
        : b.id - a.id;
    });
  }
};
// 获取当前用户的招领信息
const fetchMyFindItems = async () => {
  try {
    loading.value = true;
    const token = localStorage.getItem('token');
    if (!token) {
      throw new Error('用户未登录');
    }

    const response = await axios.get('/find/myItems', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });

    if (response.data.status === 'success') {
      items.value = response.data.data;
    } else {
      error.value = response.data.message || '获取数据失败';
    }
  } catch (err: any) {
    error.value = err.message || '请求失败，请重试';
    if (err.response && err.response.status === 401) {
      router.push('/login');
    }
  } finally {
    loading.value = false;
  }
};

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN');
};

// 编辑物品
const editItem = (item: FindItem) => {
  router.push({ 
    name: 'ItemEdit', // 确保路由名称正确
    params: { id: item.id },
    query: { type: 'found' }
  });
};

// 删除物品
const deleteItem = async (id: number) => {
  try {
    await ElMessageBox.confirm('确认删除该记录吗？', '警告', { type: 'warning' });
    
    const token = localStorage.getItem('token');
    await axios.delete(`/find/delete/${id}`, {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    
    ElMessage.success('删除成功');
    fetchMyFindItems();
  } catch (err) {
    // 用户取消删除不处理
  }
};
// 在公共方法中添加
const getImageUrl = (path: string | null) => {
  if (!path || path === 'null') return '';
  
  // 处理可能的前缀
  const cleanPath = path.replace(/^\/?uploads\//, '');
  
  return `http://localhost:8080/uploads/${cleanPath}`;
}
onMounted(() => {
  fetchMyFindItems();
});
</script>

<style scoped>
.found-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.loading, .error, .empty {
  text-align: center;
  padding: 40px;
  font-size: 16px;
}

.error {
  color: #f56c6c;
}

.empty {
  color: #909399;
}
</style>
[file content end]